<template>
  <view class="index-container">
    <e-navbar left-title="易小语AI占卜" :showBack="false"></e-navbar>
    <view class="index-top">
      <image class="top-bg" :src="$image('/images/index-top-bg.png')" mode="scaleToFill"></image>
      <view class="index-top_content">
        <view class="flex col-center row-between">
          <view class="text-bold today-title">今日运势</view>
          <view>
            <view class="day-text font-26">{{currentDate}} {{currentDayOfWeek}}</view>
          </view>
        </view>
        <view class="pingfang-heavy m-t-10">闪耀星辰的财富，点亮了前行者的道路</view>
        <view class="m-t-20 font-26 today-content">
<!--          {{everydayText}}-->



          <view class="every-card">
            <view class="week-row line-top-border">
              <view class="flex-between line-bottom-border">
                <view class=" week-row_item line-left-border line-right-border" style="width: 120rpx">
                  <view class="week-row_item_label">星期</view>
                  <view class="week-row_item_value">{{everydayData["星期"]}}</view>
                </view>
                <view class=" week-row_item line-right-border" style="width: 120rpx">
                  <view class="week-row_item_label">节气</view>
                  <view class="week-row_item_value">{{everydayData["节气"]}}</view>
                </view>
                <view class=" week-row_item flex-1 line-right-border">
                  <view class="week-row_item_label">星宿</view>
                  <view class="week-row_item_value">{{everydayData["星宿"]}}</view>
                </view>
                <view class=" week-row_item flex-1 line-right-border">
                  <view class="week-row_item_label">冲</view>
                  <view class="week-row_item_value">{{everydayData["冲"]}}</view>
                </view>
                <view class=" week-row_item line-right-border" style="width: 80rpx">
                  <view class="week-row_item_label">煞</view>
                  <view class="week-row_item_value">{{everydayData["煞"]}}</view>
                </view>
              </view>
            </view>
            <view class="orientation-card_body flex col-center text-center">
              <view class="orientation-card_body_item">
                <view class="orientation-card_body_item_label yi-icon">宜</view>
                <view class=" value-item hidden_two text-left" v-if="everydayData['宜'] && everydayData['宜'].length > 0">
                  <text class="m-r-10" style="line-height: 40rpx" v-for="(item,index) in everydayData['宜']" :key="index">{{ item }}</text>
                </view>
              </view>
            </view>
            <view class="orientation-card_body flex col-center text-center">
              <view class="orientation-card_body_item">
                <view class="orientation-card_body_item_label ji-icon">忌</view>
                <view class=" value-item hidden_two text-left" v-if="everydayData['忌'] && everydayData['忌'].length > 0">
                  <text class="m-r-10" style="line-height: 40rpx" v-for="(item,index) in everydayData['忌']" :key="index">{{ item }}</text>
                </view>
              </view>
            </view>
            <view class="flex-center">
              <view class="flex col-center" @click="handleShowMore()">
                <text class="font-24 m-r-10 text-999">{{ showMore ? "收起" : "查看更多" }}</text>
                <view class="more-icon" :class="[showMore ? 'show-more' : '']">
                  <u-icon name="arrow-down" size="14" color="#999"></u-icon>
                </view>
              </view>
            </view>

          </view>
          <view class="m-t-20 all-card" style="overflow: hidden" :style="[showMore ? {height: allCardHeight + 'px'} : {height: 0 + 'px'}]">
            <view class="orientation-card">
              <view class="orientation-card_item line-border">
                <view class="orientation-card_item_label danger-title line-right-border flex col-center">
                  <view>吉时</view>
                </view>
                <view class="flex-1">
                  <view class="year-row">
                    <view class="year-row_item line-right-border">
                      <view class="year-row_item_label">年</view>
                      <view class="year-row_item_value">{{everydayData["年"]}}</view>
                    </view>
                    <view class="year-row_item line-right-border">
                      <view class="year-row_item_label">月</view>
                      <view class="year-row_item_value">{{everydayData["月"]}}</view>
                    </view>
                    <view class="year-row_item line-right-border">
                      <view class="year-row_item_label">日</view>
                      <view class="year-row_item_value">{{everydayData["日"]}}</view>
                    </view>
                    <view class="year-row_item line-right-border">
                      <view class="year-row_item_label">时</view>
                      <view class="year-row_item_value">{{everydayData["时"]}}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="orientation-card_item">
                <view class="orientation-card_item_label danger-title line-left-border line-right-border line-bottom-border flex col-center">
                  <view>吉方</view>
                </view>
                <view class="flex-1">
                  <view class="orientation-card_body flex col-center" style="justify-content: space-around">
                    <view class="orientation-card_body_item flex-col flex-1 line-bottom-border">
                      <view class="orientation-card_body_item_label" style="margin-right: 0">阳贵神方位</view>
                      <view>{{everydayData["阳贵神方位"]}}</view>
                    </view>
                    <view class="orientation-card_body_item flex-col flex-1 line-left-border line-right-border line-bottom-border">
                      <view class="orientation-card_body_item_label" style="margin-right: 0">阴贵神方位</view>
                      <view>{{everydayData["阴贵神方位"]}}</view>
                    </view>
                  </view>
                  <view class="orientation-card_body flex-between line-bottom-border">
                    <view class="orientation-card_body_item flex-col flex-1 p-l-20 p-r-20 line-right-border">
                      <view class="orientation-card_body_item_label" style="margin: 0">喜神方位</view>
                      <view>{{everydayData["喜神方位"]}}</view>
                    </view>
                    <view class="orientation-card_body_item flex-col flex-1 p-l-20 p-r-20 line-right-border">
                      <view class="orientation-card_body_item_label" style="margin: 0">福神方位</view>
                      <view>{{everydayData["福神方位"]}}</view>
                    </view>
                    <view class="orientation-card_body_item flex-col flex-1 p-l-20 p-r-20 line-right-border">
                      <view class="orientation-card_body_item_label" style="margin: 0">财神方位</view>
                      <view>{{everydayData["财神方位"]}}</view>
                    </view>
                  </view>
                </view>
              </view>



              <view class="orientation-card_item line-left-border line-right-border line-bottom-border p-t-10 p-b-10">
                <view class="orientation-card_item_label">纳音</view>
                <view>{{everydayData["纳音"]}}</view>
              </view>
              <view class="orientation-card_item line-left-border line-right-border line-bottom-border p-t-10 p-b-10">
                <view class="orientation-card_item_label">彭祖百忌</view>
                <view>{{everydayData["彭祖百忌"]}}</view>
              </view>

              <!--<view class="orientation-card_body flex col-center text-center">-->
              <!--  <view class="orientation-card_body_item m-r-30">-->
              <!--    <view class="orientation-card_body_item_label">冲</view>-->
              <!--    <view>{{everydayData["冲"]}}</view>-->
              <!--  </view>-->
              <!--  <view class="orientation-card_body_item">-->
              <!--    <view class="orientation-card_body_item_label">煞</view>-->
              <!--    <view>{{everydayData["煞"]}}</view>-->
              <!--  </view>-->
              <!--</view>-->

              <view class="orientation-card_body flex col-center text-center ">
                <view class="orientation-card_body_item line-bottom-border line-right-border flex-1" style="align-items: stretch;padding: 0">
                  <view class="orientation-card_body_item_label line-left-border line-right-border flex col-center">
                    <view style="width: 70rpx;line-height: 32rpx">今日时辰</view>
                  </view>
                  <view class="flex flex-wrap col-center value-item">
                    <view class="" v-for="(item,index) in everydayData['今日时辰']" :key="index">{{ item }}</view>
                  </view>
                </view>
              </view>
              <view class="orientation-card_body flex col-center text-center flex-1">
                <view class="orientation-card_body_item line-bottom-border line-right-border flex-1" style="align-items: stretch;padding: 0">
                  <view class="orientation-card_body_item_label line-left-border line-right-border flex col-center">
                    <view style="width: 70rpx;line-height: 32rpx">时辰凶吉</view>
                  </view>
                  <view class="flex flex-wrap col-center shichen-item flex-1">
                    <view class="" v-for="(item,index) in everydayData['时辰凶吉']" :key="index">{{ item }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
		 <!-- @click="handleToAiChat({icon:Math.floor(Math.random() * (5 - 0 + 1)) + 0,title:'占卜助手'})" -->
     <!--   :style="{-->
     <!--   '&#45;&#45;bgImg':'url( '+ imageUrl + ')'-->
     <!--   }"-->
        <view class="helper-card" @click="handleToAiChat(toolAi)">
          <view class="helper-card_title pingfang-heavy">
            <view>占卜助手</view>
            <image class="helper-card_image" :src="$image('/images/helper-bottom.png')"></image>
          </view>
          <view class="helper-card_detail">
            <view class="hidden_two pingfang-heavy">每日占一卦</br>让AI占卜助手帮你避坑，度过顺利度过顺利度过顺利一天</view>
          </view>
          <view class="ip-image">
            <image :src="$image('/images/ip-man.png')" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="index-menu-content">
      <view class="banner-image" @click="handleToYunShi()">
        <image :src="$image('/images/banner-1.png')" mode="scaleToFill"></image>
      </view>
      <view class="title-row">占疑惑</view>
      <u-gap height="15"></u-gap>
      <view class="menu-list">
        <view
          class="menu-item"
          v-for="(item,index) in menuList"
          :key="index"
          @click="handleToAiChat(item)"
        >
          <image :src="$image('/images/menu-icon' + item.id + '.png')" mode="widthFix"></image>
          <view class="m-t-8">{{item.name}}</view>
        </view>
      </view>
      <view class="title-row"
            :style="{
               '--bgImg': 'url(' + imageUrl + '/images/menu-title-bottom.png)'
            }"
      >流年运势</view>
      <u-gap height="15"></u-gap>
      <view class="banner-image" style="height: 173rpx" @click="handleToLiunian()">
        <image :src="$image('/images/analyse-banner.png')" mode="scaleToFill"></image>
      </view>
      <u-gap height="30"></u-gap>
    </view>
		<!--<image style="opacity: 0;height: 10rpx;" :src="$image('/images/bagua-image.gif')" mode="aspectFill"></image>-->
    <e-tabbar :current="0"></e-tabbar>
  </view>
</template>

<script>
	let app = getApp();
  import config from "common/config";
	import { everyday, agent_chat } from "@/common/mock";
	export default {
		data() {
			return {
        menuList: [],
        imageUrl: config.imageUrl,
				currentDate: '', // 用于存储当前年月日
				currentDayOfWeek: '' ,// 用于存储当前星期几
        everydayText: "", //每日运势
        everydayData: "", //每日运势
        showMore: false, //是否显示更多
        allCardHeight: 0, // 运势高度
        copyHeight: 0, // 备用高度
        agent_chat: JSON.parse(JSON.stringify(agent_chat)),
        toolAi: {}, //占卜助手
        checkCardInfo: {},
			}
		},
		onShow() {
			this.getCurrentDateAndDay();
			this.getEverydayDestiny();
		},
		onLoad() {
      // this.getAiTool();
		},
		onReady() {
      setTimeout(()=>{
        this.getAiList();
      },100)
		},
		computed:{
			
		},
		watch:{
			
		},
		methods: {
      handleToYunShi(){
        app.isLogin(res=>{
          uni.navigateTo({
            url: "/pagesAugur/birthdayInfo/birthdayInfo"
          })
        })
      },
      // 占卜助手, 每日占一卦
      async getAiTool(){
        this.agent_chat.request_time = "";
        this.agent_chat.agent_type = 0;
        this.agent_chat.query = "请帮我占卜一下";
        this.agent_chat.birthday = "";
        this.agent_chat.bazi = "{}";
        this.agent_chat.message_type = "";
        const res = await this.$api.req_chat({...this.agent_chat});
        if(res.code == 1){
          console.log("她她她她她她", res);
        }
      },
      // 获取每日运势
			async getEverydayDestiny(){
        // const res = await this.$api.everyday_destiny({...everyday, isAi: true});
        const res = await this.$api.everyday_destiny({...everyday});
				if(res.code == 1){
          this.everydayData = res.data.result;
          setTimeout(()=>{
            this.getElInfo();
          },200)
				}
			},
      // 获取ai列表
      async getAiList(){
        let setting = uni.getStorageSync('setting');
        if(setting){
          setting = JSON.parse(setting);
          let menuList = JSON.parse(setting.find(item => item.key == "all_ai_question").value);
          this.menuList = menuList.filter(item => item.id != 0);
          this.toolAi = menuList.find(item => item.id == 0);
          console.log("查看目录", this.toolAi);
        }
      },
      handleToAiChat(item){
        let title = "";
        if(item.id == 0){
          title = "占卜助手";
        }else{
          title = item.name + "占卜";
        }
        let data = {
          id: item.id,
          title,
          type: item.type,
          description: item.description,
        }
        uni.navigateTo({
          // url: "/pages/ai/chat/chat?id=" + item.id + "&title=" + encodeURIComponent(item.name + "占卜") + "&type=" + item.type,
          url: "/pages/ai/chat/chat?aiData=" + encodeURIComponent(JSON.stringify(data))
        })
      },
      handleToLiunian(){
        uni.navigateTo({
          url: "/pagesAugur/liunian/liunian"
        })
      },
			getCurrentDateAndDay() {
				const now = new Date(); // 获取当前日期对象
				const year = now.getFullYear(); // 获取年份
				const month = now.getMonth() + 1; // 获取月份（从0开始，所以加1）
				const day = now.getDate(); // 获取日期
				const weekDay = now.getDay(); // 获取星期几（0是星期天）
	
				// 格式化年月日
				this.currentDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
	
				// 获取星期几的中文表示
				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				this.currentDayOfWeek = weekDays[weekDay];
			},
      handleShowMore(){
        if(Object.keys(this.everydayData).length <= 0) return;
        this.showMore = !this.showMore;
      },
      async getElInfo() {
        let rectInfo = await this.$u.getRect('.orientation-card');
        this.allCardHeight = rectInfo.height;
        this.checkCardInfo = rectInfo;
        this.copyHeight = rectInfo.height;
        console.log(this.allCardHeight);
      }
		}
	}
</script>
<style lang="scss" scoped>
.index-container {
  .more-icon{
    transition: all 0.3s;
  }
  .show-more{
    transform: rotate(-180deg);
  }
  .index-top{
    // height: 740rpx;
		padding-bottom: 100rpx;
    position: relative;
    .top-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      top: 0;
      left: 0;
    }
    &_content{
      position: relative;
      z-index: 5;
      padding: 20rpx 30rpx 0 30rpx;
      .today-title{
        font-size: 58rpx;
        color: #1F66FF;
        font-family: 'MicrosoftYaHei-Bold';
      }
      .day-text{
        color: #5779A5;
        position: relative;
      }
      .day-text:before{
        content: '';
        display: block;
        width: 28rpx;
        height: 2rpx;
        background: #5779A5;
        position: absolute;
        top: 50%;
        left: -40rpx;
        transform: translateY(-50%);
      }
      $bazi-color: #c2943f;
      .today-content{
        color: #3D505D;
        line-height: 48rpx;
        .every-card{
          padding: 20rpx 20rpx 10rpx 20rpx;
          background: #fff;
          border-radius: 14rpx;
          .week-row{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &_item{
              text-align: center;
              padding: 10rpx 0;
              >view{
                line-height: 40rpx;
              }
              &_label{
                color: $bazi-color;
              }
              &_value{
                //line-height: 36rpx;
              }
            }
          }
          .yi-icon{
            min-width: 50rpx;
            min-height: 50rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $bazi-color;
            color: #fff;
            font-size: 24rpx;
          }
          .ji-icon{
            min-width: 50rpx;
            min-height: 50rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #cf2c2e;
            color: #fff;
            font-size: 24rpx;
          }
        }
      }
      $border-color: #e9e9e9;
      .line-border{
        border: 1px solid $border-color;
      }
      .line-left-border{
        border-left: 1px solid $border-color;
      }
      .line-top-border{
        border-top: 1px solid $border-color;
      }
      .line-right-border{
        border-right: 1px solid $border-color;
      }
      .line-bottom-border{
        border-bottom: 1px solid $border-color;
      }
      .all-card{
        transition: all .3s;
      }
      .orientation-card{
        background: #fff;
        padding: 20rpx;
        border-radius: 20rpx;
        .week-row{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &_item{
            text-align: center;
            padding: 10rpx 0;
            >view{
              line-height: 40rpx;
            }
            &_label{
              color: $bazi-color;
            }
            &_value{
              //line-height: 36rpx;
            }
          }
        }
        &_item{
          display: flex;
          align-items: stretch;
          >view{
            line-height: 40rpx;
          }
          &_label{
            color: $bazi-color;
            padding-left: 10rpx;
            padding-right: 10rpx;
          }
          .danger-title{
            color: #EA4A4A;
            font-size: 30rpx;
            font-family: pingfang-heavy;
            font-weight: bold;
            //width: 40rpx;
            //line-height: 40rpx;
          }
          .year-row{
            display: flex;
            align-items: center;
            flex: 1;
            &_item{
              width: calc(100% / 4);
              display: flex;
              //flex-direction: column;
              //align-items: center;
              //justify-content: space-between;
              //width: 40rpx;
              text-align: center;
              height: 100%;
              padding: 10rpx 0;
              &_label{
                color: $bazi-color;
                padding-left: 14rpx;
              }
              &_value{
                flex: 1;
                //line-height: 36rpx;
                //min-height: 120rpx;
                //display: flex;
                //flex-direction: column; /* 垂直排列 */
                //justify-content: space-between; /* 上下对齐 */
                //text-align: center; /* 居中对齐 */
                //white-space: pre-wrap; /* 保留换行 */
              }
            }
          }
        }
        &_body{
          &_item{
            display: flex;
            align-items: center;
            padding: 10rpx 0;
            &_label{
              color: $bazi-color;
              margin-right: 20rpx;
            }
          }
          .value-item {
            >view {
              width: calc(100% / 5);
            }
          }
          .shichen-item {
            >view {
              width: calc(100% / 7);
            }
          }
        }
      }
      .helper-card{
        background: #fff;
        padding: 30rpx;
        border-radius: 20rpx;
        margin-top: 26rpx;
        position: relative;
        &_title{
          position: relative;
          display: inline-block;
        }
        &_image{
          height: 20rpx;
          width: 70%;
          margin: -4rpx auto 0 auto;
          display: block;
        }
        &_title:before{
          content: '';
          position: absolute;
          width: 70rpx;
          height: 20rpx;
          display: block;
          background: var(--bgImg) no-repeat center center / cover;
          bottom: -14rpx;
          left: 50%;
          transform: translateX(-50%);
        }
        &_detail{
          background: linear-gradient(90deg, #CDEAFF 0%, #FFFFFF 100%);
          padding: 22rpx 180rpx 22rpx 26rpx;
          font-size: 24rpx;
          margin-top: 8rpx;
          border-radius: 0rpx 30rpx 30rpx 30rpx;
          >view{
            line-height: 40rpx;
          }
        }
        .ip-image{
          width: 194rpx;
          height: 368rpx;
          position: absolute;
          right: 10rpx;
          top: 46%;
          transform: translateY(-50%);
          image{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
  }
  .index-menu-content{
    padding: 40rpx 30rpx;
    background: #fff;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    margin-top: -40rpx;
    position: relative;
    z-index: 10;
    .banner-image{
      height: 300rpx;
      image{
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 10rpx;
      }
    }
    .title-row{
      font-family: 'pingfang-heavy';
      font-size: 30rpx;
      margin-top: 38rpx;
      position: relative;
    }
    .title-row:after{
      content: '';
      display: block;
      width: 124rpx;
      height: 6rpx;
      background: var(--bgImg) no-repeat center center / cover;
      bottom: -8rpx;
      position: absolute;
    }
    .menu-list{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .menu-item{
        width: calc(100% / 5 - 34rpx);
        text-align: center;
        font-size: 24rpx;
        font-family: 'pingfang-heavy';
        image{
          width: 100%;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
